<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="地址管理" name="pending-payment"></el-tab-pane>
      <el-tab-pane label="信息管理" name="not-shipped"></el-tab-pane>
    </el-tabs>

    <div class="order-content">
      <h2>{{ activeTabLabel }}</h2>

      <!-- 地址管理部分 -->
      <div v-if="activeTab === 'pending-payment'">
        <el-button type="primary" @click="showAddAddressModal"
          >添加地址</el-button
        >
        <ul class="order-list">
          <li
            v-for="address in addressList"
            :key="address.id"
            class="order-item"
          >
            <div class="order-header">
              <span class="order-id">收货人：{{ address.name }}</span>
              <span class="order-total">电话：{{ address.phone }}</span>
              <span class="order-total">收货地址：{{ address.address }}</span>
              <el-button type="danger" @click="confirmDeleteAddress(address.id)"
                >删除</el-button
              >
              <el-button type="info" @click="showEditAddressModal(address)"
                >修改</el-button
              >
            </div>
            <div class="item-list">
              <span class="item-name">{{ address.detail }}</span>
            </div>
          </li>
        </ul>
        <div v-if="addressList.length === 0" class="no-orders"></div>
      </div>

      <!-- 信息管理部分 -->
      <div v-if="activeTab === 'not-shipped'">
        <h3>当前登录用户: {{ userInfo.username }}</h3>
        <!-- 渲染用户名 -->
        <el-button type="primary" @click="showEditUserModal"
          >修改信息</el-button
        >
        <!-- 修改个人信息按钮 -->
      </div>
    </div>

    <!-- 添加地址弹窗 -->
    <el-dialog title="添加地址" :visible.sync="isAddAddressModalVisible">
      <el-form :model="newAddress">
        <el-form-item label="姓名">
          <el-input v-model="newAddress.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newAddress.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newAddress.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAddAddressModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAddress">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确认删除弹窗 -->
    <el-dialog title="确认删除" :visible.sync="isDeleteAddressModalVisible">
      <p>您确定要删除此地址吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDeleteAddressModalVisible = false"
          >取 消</el-button
        >
        <el-button type="danger" @click="deleteAddress">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改地址弹窗 -->
    <el-dialog title="修改地址" :visible.sync="isEditAddressModalVisible">
      <el-form :model="editAddress">
        <el-form-item label="姓名">
          <el-input v-model="editAddress.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editAddress.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editAddress.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditAddressModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateAddress">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改个人信息弹窗 -->
    <el-dialog title="修改个人信息" :visible.sync="isEditUserModalVisible">
      <el-form :model="userInfo">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="userInfo.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditUserModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserInfo">确 定</el-button>
        <!-- 提交修改按钮 -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      userInfo: {
        userId: localStorage.getItem("userId"),
        username: localStorage.getItem("userName"),
        password: "",
      },
      addressList: [],
      selectedAddresses: [],
      dropdownVisible: false,
      isModalVisible: false, // 控制弹窗显示
      isAddAddressModalVisible: false, // 控制添加地址弹窗显示
      isDeleteAddressModalVisible: false, // 控制删除确认弹窗显示
      isEditAddressModalVisible: false, // 控制修改地址弹窗显示
      isEditUserModalVisible: false, // 控制修改个人信息弹窗显示
      newAddress: {
        // 新地址数据
        name: "",
        phone: "",
        address: "",
      },
      editAddress: {
        // 编辑地址数据
        id: null,
        name: "",
        phone: "",
        address: "",
      },
      addressToDelete: null, // 要删除的地址ID
      activeTab: "pending-payment", // 默认选中的标签
      activeTabLabel: "地址管理", // 当前标签的标题
    };
  },
  methods: {
    fetchAddressList() {
      const userId = localStorage.getItem("userId");
      axios
        .get(`/Address/Sel?user_id=${userId}`)
        .then((response) => {
          if (response.data.code === 200) {
            this.addressList = response.data.data;
            if (this.addressList.length > 0) {
              this.selectedAddresses = [this.addressList[0]];
            }
          } else {
            this.$message.error("获取地址失败: " + response.data.msg);
          }
        })
        .catch((error) => {
          console.error("获取地址失败:", error);
          this.$message.error("获取地址失败，请重试。");
        });
    },
    showAddAddressModal() {
      this.isAddAddressModalVisible = true; // 显示添加地址弹窗
    },
    addAddress() {
      const userId = localStorage.getItem("userId");
      const addressData = {
        ...this.newAddress,
        user_id: userId, // 添加用户ID
      };
      axios
        .post(`/Address/Add`, addressData) // 调用添加地址接口
        .then((response) => {
          if (response.data.code === 200) {
            this.$message.success("地址添加成功！");
            this.isAddAddressModalVisible = false; // 关闭弹窗
            this.fetchAddressList(); // 刷新地址列表
          } else {
            this.$message.error("添加地址失败: " + response.data.msg);
          }
        })
        .catch((error) => {
          console.error("添加地址失败:", error);
          this.$message.error("添加地址失败，请重试。");
        });
    },
    confirmDeleteAddress(id) {
      this.addressToDelete = id; // 设置要删除的地址ID
      this.isDeleteAddressModalVisible = true; // 显示删除确认弹窗
    },
    deleteAddress() {
      axios
        .post(`/Address/Del?id=${this.addressToDelete}`) // 调用删除地址接口
        .then((response) => {
          if (response.data.code === 200) {
            this.$message.success("地址删除成功！");
            this.isDeleteAddressModalVisible = false; // 关闭弹窗
            this.fetchAddressList(); // 刷新地址列表
          } else {
            this.$message.error("删除地址失败: " + response.data.msg);
          }
        })
        .catch((error) => {
          console.error("删除地址失败:", error);
          this.$message.error("删除地址失败，请重试。");
        });
    },
    showEditAddressModal(address) {
      this.editAddress = {
        // 设置要编辑的地址信息
        id: address.id,
        name: address.name,
        phone: address.phone,
        address: address.address,
      };
      this.isEditAddressModalVisible = true; // 显示修改地址弹窗
    },
    updateAddress() {
      const userId = localStorage.getItem("userId");
      const addressData = {
        id: this.editAddress.id,
        name: this.editAddress.name,
        phone: this.editAddress.phone,
        address: this.editAddress.address,
        user_id: userId, // 添加用户ID
      };
      axios
        .post(`/Address/Upd`, addressData) // 调用修改地址接口
        .then((response) => {
          if (response.data.code === 200) {
            this.$message.success("地址修改成功！");
            this.isEditAddressModalVisible = false; // 关闭弹窗
            this.fetchAddressList(); // 刷新地址列表
          } else {
            this.$message.error("修改地址失败: " + response.data.msg);
          }
        })
        .catch((error) => {
          console.error("修改地址失败:", error);
          this.$message.error("修改地址失败，请重试。");
        });
    },
    showEditUserModal() {
      this.isEditUserModalVisible = true; // 显示修改个人信息弹窗
    },
    updateUserInfo() {
      const userId = localStorage.getItem("userId");
      const userData = {
        id: userId,
        username: this.userInfo.username,
        password: this.userInfo.password,
      };
      axios
        .post(`/User/Upd`, userData) // 调用更新用户信息接口
        .then((response) => {
          if (response.data.code === 200) {
            this.$message.success("信息更新成功！");
            this.isEditUserModalVisible = false; // 关闭弹窗
          } else {
            this.$message.error("更新失败: " + response.data.msg);
          }
        })
        .catch((error) => {
          console.error("更新用户信息失败:", error);
          this.$message.error("更新失败，请重试。");
        });
    },
    handleTabClick(tab) {
      this.activeTabLabel = tab.label; // 更新当前标签的标题
    },
  },
  mounted() {
    this.fetchAddressList(); // 组件挂载时获取用户信息
  },
};
</script>

<style scoped>
.order-content {
  margin-top: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.order-list {
  list-style-type: none;
  padding: 0;
}

.order-item {
  background-color: #fff;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.order-id {
  font-weight: bold;
}

.order-total {
  color: #ff5722;
  /* 价格颜色 */
}

.item-list {
  list-style-type: none;
  padding: 0;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #e0e0e0;
}

.item-name {
  flex: 1;
}

.item-quantity,
.item-price {
  margin-left: 10px;
}

.item-image {
  max-width: 50px;
  /* 设置图片宽度 */
  height: auto;
  margin-left: 10px;
  /* 图片与文本之间的间距 */
}

.no-orders {
  color: #999;
  font-style: italic;
}

.pay-button {
  margin-top: 10px;
}

.confirm-button {
  margin-top: 10px;
}

.review-button {
  margin-top: 10px;
  /* 去评价按钮的样式 */
}
</style>
